<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 | 机械配件商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="./element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="components/min-width-container1.css"/>
    <link rel="stylesheet" type="text/css" href="components/header-simple.css">
    <link rel="stylesheet" type="text/css" href="components/footer-bottom.css">
    <link rel="stylesheet" type="text/css" href="components/footer-image.css">
    <style>
        .app-content {
            margin-left: 1300px;
            padding-left: 100px;
            padding-top: 50px;
            padding-bottom: 100px;
            width: 600px;
            background: #ffffff;
        }

        .app-content-form {
            width: 360px;
            background: #ffffff;
        }

        .app-content-form-item {
            display: flex;
            align-items: center;
            height: 64px;
            background: #ffffff;
        }

        .app-content-form-item > div:first-child {

        }

        .app-content-form-item > div:last-child {
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <header-simple></header-simple>
    <min-width-container1>
        <div class="app-content">
            <div class="app-content-title">
                <h1>欢迎访问机械商城！</h1>
            </div>
            <div class="app-content-form m-t-20">
                <div class="app-content-form-item">
                    <div class="m-r-8"><i class="el-icon-s-custom text-important-very text-1"></i></div>
                    <div>
                        <el-input v-model="account" placeholder="用户名"></el-input>
                    </div>
                </div>
                <div class="app-content-form-item">
                    <div class="m-r-8"><i class="el-icon-key text-important-very text-1"></i></div>
                    <div>
                        <el-input v-model="password" placeholder="密码" show-password></el-input>
                    </div>
                </div>
                <div class="app-content-form-item">
                    <div>
                        <el-checkbox v-model="remember">记住密码</el-checkbox>
                    </div>
                    <div class="right">
                        <el-button type="text" @click="window.location.href='/password-forget1.html'">忘记密码</el-button>
                        <el-button type="text" @click="window.location.href='/register.html'">免费注册</el-button>
                    </div>
                </div>
                <div>
                    <el-button type="primary" size="small" style="width: 100%;" @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </min-width-container1>
    <footer-image></footer-image>
    <footer-bottom></footer-bottom>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./element-ui/index.js"></script>
<script src="components/min-width-container1.js"></script>
<script src="components/header-simple.js"></script>
<script src="components/footer-bottom.js"></script>
<script src="components/footer-image.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                account: "",
                password: "",
                remember: false
            };
        },
        created() {
            const user = JSON.parse(localStorage.getItem("user"));
            if (user) {
                this.account = user.account;
                this.password = user.password;
            }
        },
        methods: {
            login() {
                if (this.account === "" || this.password === "") {
                    this.$message.error('请输入完整的通行账号和密码');
                } else {
                    const params = new URLSearchParams();
                    params.append('account', this.account);
                    params.append('password', this.password);
                    axios.post("/user/do_login.do", params)
                        .then(response => {
                            const data = response.data;
                            if (this.remember) {
                                const user = {
                                    account: this.account,
                                    password: this.password
                                };
                                localStorage.setItem("user", JSON.stringify(user));
                            } else {
                                localStorage.removeItem("user");
                            }
                            if (data.status === 0) {
                                this.$message({
                                    message: "登录成功",
                                    type: "success"
                                });
                                setTimeout(() => {
                                    window.location.href = "/order.html";
                                }, 2000);
                                //保存登录信息
                                sessionStorage.setItem("user", JSON.stringify(data.data));
                            } else {
                                this.$message(data.msg);
                            }
                        }).catch(err => {
                        this.$message.error('发送请求失败');
                    })
                }
            }
        }
    });
</script>
</body>
</html>